<template>
  <el-select
    v-model="nv[fvData.fdName]"
    placeholder="Select"
    size="large"
    clearable
    style="width: 240px"
    v-if="nv"
    ref="selector"
  >
    <el-option
      v-for="item in options"
      :key="item.code"
      :label="item.description"
      :value="item.code"
    />
  </el-select>
</template>

<script>
import { ref, computed, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import filterUtils from '../../js/FilterUtils'

export default {
  name: 'FvFilterSelect',
  props: {
    fvData: {
      default: null,
      type: Object
    }
  },
  setup(props) {
    const nv = computed(() => {
      return props.fvData.getNv();
    });
    const multiple = ref(false);
    const options = ref([]);
    const express = ref(null)
    onMounted(async() => {
      let expression = props.fvData.fdLayout.expression;
      if (!expression) {
        ElMessage({
          message: '没有配置查询下拉框表达式',
          type: 'error',
          plain: true
        })
        return;
      }
      expression = JSON.parse(expression);
      if (expression.multiple) multiple.value = true;
      express.value = expression;
    });

    const conditionValues = computed(() => {
      if (express.value == null) return null;
      const fdNames = filterUtils.getSourceFdNames(express.value);
      const result = [];
      for (const fdName of fdNames) result.push(nv.value[fdName]);
      return result;
    })

    watch(conditionValues, async(newValue, oldValue) => {
      const optionMsg = await filterUtils.filterOptions(express.value, nv.value);
      if (!optionMsg.success) return;
      options.value = optionMsg.value;
    })
    return {
      nv,
      options,
      express,
      conditionValues
    }
  }
}
</script>

<style scoped>

</style>
